<template>
  <div>
    <div class="return">
      <router-link to="/mine">
        <a-icon type="left"/>
      </router-link>
    </div>
    <div class="pic">
      <van-uploader v-model="fileList" multiple :max-count="1"/>
    </div>
    '

    <van-tabs v-model="active">
      <van-tab title="基础信息修改">
        <div class="fenlei">
          <a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="usergroup-delete"/><span>用户名</span></span>
              <a-input v-model="name"/>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="mail"/><span>电子邮箱</span></span>
              <a-input v-model="message"/>
            </a-sub-menu>

            <a-sub-menu key="sub4">
              <span slot="title"><a-icon type="fork"/><span>性别</span></span>
              <van-radio-group v-model="sex" style="margin-left: 35px">
                <van-radio name="0" style="margin-bottom: 5px">男生</van-radio>
                <van-radio name="1">女生</van-radio>
              </van-radio-group>
            </a-sub-menu>

            <a-sub-menu key="sub6">
              <span slot="title"><a-icon type="smile"/><span>自我介绍</span></span>
              <a-textarea
                  v-model="value"
                  placeholder="愿你出走半生,归来仍是少年"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-sub-menu>
          </a-menu>
        </div>
        <van-button round type="info" @click="change" class="btn1">确认修改</van-button>
      </van-tab>
      <van-tab title="高级修改">
        <div class="fenlei">
          <a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="usergroup-delete"/><span>手机号</span></span>
              <a-input v-model="oldphone"/>
            </a-sub-menu>

            <a-sub-menu key="sub4">
              <span slot="title"><a-icon type="warning"/><span>新的密码</span></span>
              <a-input v-model="newpassword"/>
            </a-sub-menu>


            <a-sub-menu key="sub5">
              <span slot="title"><a-icon type="smile"/><span>获取验证码</span></span>
              <a-form-item
                  v-bind="formItemLayout"
              >
                <a-row :gutter="8">
                  <a-col :span="12">
                    <a-input v-model="newmessage"/>
                  </a-col>
                  <a-col :span="12" >
                    <a-button @click="getmessage">获取验证码</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-sub-menu>
          </a-menu>
        </div>
        <van-button round type="info" @click="changepassword" class="btn1">确认修改</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Notify } from 'vant';
import {phone} from "@/api/api";
import {avatar} from "@/api/api";
import {changemine} from "@/api/api";
import {forgetPassword} from "@/api/api";
export default {
  name: "changemine",
  data() {
    return {
      active: 2,
      name: "",
      message: "",
      phone: "",
      sex: '0',
      age: '1',
      oldphone:"",
      newmessage:"",
      newpassword:"",
      newphone:"",
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4', 'sub5', 'sub3', 'sub7', 'sub6', 'sub19'],
      openKeys: ['sub1'],
      value: "",
      fileList: [
        // { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    };
  },
  methods: {
    getmessage(){
      console.log(this.newmessage)
      console.log(this.oldphone)
      phone(this.oldphone).then(res=>{
        console.log(res)
      })
    },
    //点击修改信息
    changepassword(){
      //修改的是密码
      console.log(this.oldphone)
      console.log(this.newmessage)
      console.log(this.newpassword)
      // forgetPassword(this.oldphone,this.newpassword,this.oldphone,this.newmessage).then(res=>{
            forgetPassword(this.oldphone,this.newpassword,this.oldphone,this.newmessage).then(res=>{
        console.log(res)
        if(res.code==0){
          Notify({
            message: '修改成功',
            duration: 1000,
            background: '#07f562',
          });
        }else{
          Notify({
            message: '修改失败',
            duration: 1000,
            background: '#fc0404'
          });
        }
      })
    },
    change() {
      // console.log(this.name)
      // console.log(this.fileList[0].file);
      // console.log(this.radio)
      // console.log(this.value)
      //上传头像
      if (this.fileList.length != 0) {
        avatar(this.fileList[0].file).then(res => {
          console.log(res)
        })
      } else {
        console.log("没有头像")
      }
      //  上传信息
      changemine(this.name, this.message, this.phone, this.sex, this.value).then(res => {
        console.log(res)
      })

    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
}
</script>

<style scoped lang="less">
.pic {
  height: calc(100vh / 4);
  line-height: calc(100vh / 3);
  padding: 0 60px;
  box-sizing: border-box;
  margin: auto;
  text-align: center;

  img {
    width: 100%;
    border-radius: 100%;
  }
}

.fenlei {
  ul {
    width: 80%;
    margin: auto;
    size: 17px;

    input {
      width: 90%;
      margin-left: 15px;
    }

    textarea {
      width: 90%;
      margin-left: 15px;
    }
  }
}

.btn1 {
  width: 50%;
  margin-top: 15px;
  margin-left: 25%;
}

.return {
  font-size: 20px;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: -10px;
}
</style>